<template>
  <div class="div">
    <PageTitle title="品牌商商品"></PageTitle>
    <ListSearchBar :typeList="typeList" :typeData="typeData" :isSearch="true" :searchData="searchData" searchPlaceHolder="请输入手机号搜索" @fil="handleFil"></ListSearchBar>
    <el-table
      stripe
      :data="tableData"
    >
      <el-table-column
        prop="title"
        label="加盟商名称">
      </el-table-column>
      
      <el-table-column
        prop="machineCount"
        label="机器数量(台)">
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="订单数量">
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="退单数量">
      </el-table-column>
      <el-table-column
        prop="orderPrice"
        label="订单金额(元)">
      </el-table-column>
      <el-table-column
        prop="Stock"
        label="商品库存">
      </el-table-column>
      <el-table-column
        label="操作"
        width="140">
      <template slot-scope="scope">
        <router-link
          :to="'/brandDealerGoodsList/brandDealerGoodsDetail/' + scope.row.id"
          class="color-theme margin-right"
          @click.native="goToDetail"
        >查看</router-link>
      </template>
      </el-table-column>
    </el-table>
    <div class='pagination-wrapper'>
      <el-pagination
          layout="prev, pager, next"
          @current-change="pageChange"
          :page-size="pageSize"
          :total="totalCount"
          :current-page="pageNum"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import ListSearchBar from '@/components/listSearchBar/ListSearchBar.vue'
  import _ from 'lodash'
  export default {
    name: 'brandDealerGoodsList',
    components: {
      PageTitle,
      ListSearchBar
    },
    created() {
      this._returnToList()
    },
    mounted() {
      // this._getList()
    },
    data() {
      return {
        tableData: [{
          id: 1,
          title: '加盟商1',
          machineCount: '13',
          orderCount: '4',
          orderPrice: '250000.00',
          Stock: '500'
        }],
        pageNum: 1,
        totalCount: 0,
        pageSize: 10,
        url: this.$route.path,
        typeData: '0',//  筛选参数
        searchData: '',//搜索参数,
        typeList: [
          {
            name: '全部',
            data: '0'
          },
          {
            name: '上架',
            data: '1'
          },
          {
            name: '下架',
            data: '2'
          }
        ],
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
      // 点击查看详情时记录筛选等状态
      goToDetail() {
        let data = {
          url: this.url,
          pageNum: this.pageNum,
          typeData: this.typeData,
          searchData: this.searchData
        }
        localStorage.setItem('params', JSON.stringify(data))
      },
      // 返回列表页加载筛选等状态
      _returnToList() {
        if(localStorage.getItem('params')) {
          let data = JSON.parse(localStorage.getItem('params'))
          if(data.url === this.$route.path) {
            this.pageNum = data.pageNum
            this.typeData = data.typeData
            this.searchData = data.searchData
          } else {
            localStorage.removeItem('params')
          }
        }
      },
      async _getList() {
        try{
          let { data: { data, code, msg }} = await this.$axios({
            url: '/v1/goods/zhan',
            method: 'GET',
            params: {
              size: this.pageSize,
              current: this.pageNum,
              state: this.typeData,
              title: this.searchData
            }
          })
                
          if(code == 0) {
             this.tableData = data.items
             this.totalCount = data.page.totalCount
          } else {
            this.$message.warning(data.message)
          }
        }catch(e){
          this.$message({
            type: 'error',
            message: e
          })
        }
      },
      changeState(id, state) {
        this.$confirm('确认变更状态吗？', '提示', {
          type: 'warning'
        }).then(r => {
          this._changeState(id, state)
        })
      },
      _changeState: _.throttle(async function(id, state) {
        try{
          let {data: {data, code, msg}} = await this.$axios({
            url: '/v1/goods/lower',
            method: 'POST',
            data: {
              id,
              state 
            }
          })
          if(code === 0) {
            this.$message.success(data)
            this._getList()
          } else {
            this.$message.warning(data.message)
          }
        }catch(e){
          this.$message({
            type: 'error',
            message: e
          })
        }
      },2000, {trailing: false}),
      handleFil(data) {
        if(data.type == 'fil') {
          this.typeData = data.filter
        } else if(data.type == 'search') {
          this.searchData = data.search
        } else if(data.type == 'date') {
          this.dateData = data.date
        }
        this.pageNum = 1
        this._getList()
      },
      pageChange(pageNum) {
        this.pageNum = pageNum
        this._getList()
      },
      handlePictureCardPreview(src) {
        this.dialogImageUrl = src;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list-img {
     width:80%;
     height:60px;
     cursor: pointer;
  }
  .el-button--text {
    text-decoration: none;
  }
</style>
